<template>
  <div class="rt-container">
    <div class="rt-table">
      <div class="tr t-header">
        <div class="td no-rg-border" />
        <div
          v-for="number in table.level"
          :key="number"
          class="td no-rg-border left-border"
        >
          <div v-if="number === 1">
            {{ table.copyWriting.min }}
          </div>
          <div v-if="number === table.level">
            {{ table.copyWriting.max }}
          </div>
          <div class="number-wrapper">
            <span class="number">{{ number }}</span>
          </div>
        </div>
      </div>
      <div class="tbody">
        <div
          v-for="(row, rIndex) in getTableRows"
          :key="rIndex"
          class="tr"
        >
          <div class="td">
            {{ row.label }}
          </div>
          <el-rate
            v-model="dataValue[row.id]"
            :icons="[getCurrentIcon, getCurrentIcon, getCurrentIcon]"
            :colors="[iconColor, iconColor, iconColor]"
            :max="table.level"
            :void-icon="getCurrentIcon"
            class="rate"
            @change="handleChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="MatrixScale">
import "./icon/iconfont.css";
import { matrixScaleProps, useMatrixScale } from "./useMatrixScale";
const props = defineProps({
  ...matrixScaleProps
});

const emit = defineEmits(["update:value", "change"]);

const { dataValue, handleChange, getTableRows, getCurrentIcon } = useMatrixScale(props, emit);
</script>

<style lang="scss" scoped>
@use "./icon/iconfont.css" as *;

.rt-container {
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;

  .rt-table {
    border-radius: 8px;
    width: 100%;
    min-width: 600px;
    font-size: 14px;
    color: #606266;
    background-color: #fff;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow-x: auto;

    .t-header {
      align-items: stretch; /* 确保所有子项高度一致 */
      color: #606266;
      display: flex; /* 使用 Flexbox 布局 */

      .td {
        flex: 1; /* 所有单元格平分宽度 */
        /* 统一内边距 */
        white-space: normal; /* 允许换行 */
        border-right: 1px solid #ebeef5; /* 统一右边框 */
        text-align: center;
        vertical-align: middle !important;
        font-size: 14px !important;
        color: #606266;
        box-sizing: border-box; /* 确保边框和内边距计算在宽度内 */
        position: relative; /* 为绝对定位提供参考 */
        padding: 12px 0 30px;
      }

      .number-wrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
      }

      .number {
        display: block;
        width: 100%;
        text-align: center;
      }

      .td:first-child {
        border-left: none; /* 第一列不需要左边框 */
      }
    }

    .tbody {
      display: flex;
      flex-direction: column;
    }

    .tr {
      vertical-align: inherit;
      border-color: inherit;
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    .td,
    :deep(.el-rate__item) {
      flex: 1;
      width: 50px;
      padding: 12px 0;
      box-sizing: border-box;
      overflow-wrap: break-word;
      border-bottom: 1px solid #ebeef5;
      text-align: center;
      vertical-align: middle !important;
      font-size: 14px !important;
      color: #606266;
    }

    :deep(.el-rate__item) {
      line-height: inherit !important;
      border-right: none !important;
    }

    .tr .no-rg-border:not(:last-child) {
      border-right: none !important;
    }

    .left-border {
      border-left: 1px solid #ebeef5;
    }

    .rate {
      display: contents !important;
    }
  }
}
</style>
